<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>日历</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<script src="jquery-2.1.1.js"></script>

	<style>
		*{padding:0;margin:0;}
		html,body{width:100%;}
		ul,li{list-style:none;}
		.main{width:80%;margin:100px auto;-moz-user-select:none;}
		.box{width:300px;}
		.title{width:100%;height:30px;}
		.title:after{content:"";display:block;clear:both;}
		.title .title_left_l{width:15%;float:left;text-align:center;height:30px;line-height:30px;cursor:pointer;}
		.title .title_left{width:15%;float:left;text-align:center;height:30px;line-height:30px;cursor:pointer;}
		.title .title_center{width:40%;float:left;text-align:center;height:30px;line-height:30px;}
		.title .title_right_r{width:15%;float:left;text-align:center;height:30px;line-height:30px;cursor:pointer;}
		.title .title_right{width:15%;float:left;text-align:center;height:30px;line-height:30px;cursor:pointer;}

		.content{width:100%;line-height:30px;}
		.content .content_title{width:100%;margin:10px auto;}
		.content .content_title:after{content:"";display:block;clear:both;}
		.content .content_title li{width:14.285%;float:left;height:30px;line-height:30px;text-align:center;}
		.content .content_con{width:100%;margin:10px auto;}
		.content .content_con:after{content:"";display:block;clear:both;}
		.content .content_con li{width:14.285%;float:left;line-height:30px;text-align:center;height:30px;cursor:pointer;color:#000000;}
		.content .content_con li:hover{background:#CCC;}
		.content .content_con li.prev_dayss{color:#666666;}
		.content .content_con li.hover{background:#19aae1;color:#FFF;}
		.content .content_con li.active{background:#f60;color:#FFF;}
		.now_year_click input{width:50%;height:30px;line-height:30px;border:0;vertical-align: top;}
		
	</style>
</head>
<body>
	<div class="main" onselectstart="return false">
		<div class="box">
			<div class="title">
				<div class="title_left_l title_left_l_click"><<</div>
				<div class="title_left title_left_click"><</div>
				<div class="title_center"><span class="now_year now_year_click"></span>年<span class="now_month"></span>月</div>
				<div class="title_right title_right_click">></div>
				<div class="title_right_r title_right_r_click">>></div>
			</div>
			<div class="content">
				<ul class="content_title">
					<li>日</li>
					<li>一</li>
					<li>二</li>
					<li>三</li>
					<li>四</li>
					<li>五</li>
					<li>六</li>
				</ul>
				<ul class="content_con">

				</ul>
			</div>
		</div>
	</div>


	<script>
		$(function(){
			var oDate = new Date();//获取年月日时分秒
			yearss = oDate.getFullYear();//获取年份
			monthss= oDate.getMonth()+1;//获取月份
			$(document).on("click",".title_left_click",function(){//点击按钮月份减一
				if(monthss==1){
					yearss--;
					monthss=13;
				}
				monthss--;
				$(".content_con").html("");
				rili(yearss,monthss);

			})
			$(document).on("click",".title_right_click",function(){//点击按钮月份加一
				if(monthss==12){
					yearss++;
					monthss=0;
				}
				monthss++;
				$(".content_con").html("");
				rili(yearss,monthss);

			})
			$(document).on("click",".title_left_l_click",function(){//点击按钮年份减一
				yearss--;
				$(".content_con").html("");
				rili(yearss,monthss);

			})
			$(document).on("click",".title_right_r_click",function(){//点击按钮年份加一
				yearss++;
				$(".content_con").html("");
				rili(yearss,monthss);

			})
			rili(yearss,monthss);//默认获取当前月份
			$(document).on("click",".content_con li",function(){//获取当前月份当前日期加背景
				if($(this).text() == "") return false;
				$(".content_con li").removeClass("active")
				$(this).addClass("active")

			})
			$(document).on("dblclick",".now_year_click",function(){//点击按钮年份减一
				$(this).html("<input type='text' placeholder='输入年份' vale='' />");
				$(this).find("input").focus();
			})
			$(".now_year_click").change(function(){
				yearss = $(this).find("input").val();
				$(".content_con").html("");
				rili(yearss,monthss);
			})

		})

		function rili(yearss,monthss){
			var oDate = new Date(yearss+"/"+monthss+"/01 00:00:00");//获取年月日时分秒
			years = oDate.getFullYear();//获取年份
			months=oDate.getMonth()+1;//获取月份
			$(".now_year").html(years);//显示年份
			$(".now_month").html(months);//显示月份
			dddd=new Date(years+'/'+months+'/01 00:00:00').getDay();//获取当前月份1号是周几
			var prev_months_sum = (function(){//获取当前月份上一个月的天数
				if(months==1){
					return (new Date(years+'/'+months+'/01 00:00:00')-new Date((years-1)+'/'+12+'/01 00:00:00'))/60/60/24/1000;
				}else{
					return (new Date(years+'/'+months+'/01 00:00:00')-new Date(years+'/'+(months-1)+'/01 00:00:00'))/60/60/24/1000;
				}
			})();
			var sum=0;
			for(var i=1900;i<years;i++){//获取从1900年到现在年份之前的天数（不包括当前年份）
				if(i%4==0&&i%100!=0||i%400==0){
					sum=sum+366;
				}else{
					sum=sum+365;
				}
			}

			for(var i=1;i<months;i++){//获取当前年份1月1号到当前年份当前月份1号 的天数
				if(i==2){
					if(i%4==0&&i%100!=0||i%400==0){
						sum=sum+29;
					}else{
						sum=sum+28;
					}
					
				}else{
					if(i==4||i==6||i==9||i==11){
						sum=sum+30;
					}else{
						sum=sum+31;
					}
				}
			}
			sum=sum+1;
			var wekday=sum%7;
			if(dddd==0){
				dddd=7;
			}
			for(var i=prev_months_sum-dddd;i<prev_months_sum;){
				i++;
				$(".content_con").append("<li class='prev_dayss title_left_click'>"+i+"</li>")
			}//153行到159行 显示上个月最后几天

			if(months==4||months==6||months==9||months==11){
				for(var i=1;i<=30;i++){
					$(".content_con").append("<li>"+i+"</li>")
					sum++;
				}
			}else{
				if(months==2){
					if(years%4==0&&years%100!=0||years%400==0){
						for(var i=1;i<=29;i++){
							$(".content_con").append("<li>"+i+"</li>")
							sum++;
						}
					}else{
						for(var i=1;i<=28;i++){
							$(".content_con").append("<li>"+i+"</li>")
							sum++;
						}
					}
				}else{
					for(var i=1;i<=31;i++){
						$(".content_con").append("<li>"+i+"</li>")
						sum++;
					}
				}
			}

			if(yearss==new Date().getFullYear()&&monthss==new Date().getMonth()+1){
				$("li").each(function(){
					if($(this).text()==new Date().getDate()){
						$(this).addClass("hover");
						return false;
					}
				})				
			}//为当前日期加标记

			var summs =7 - ($(".content_con li").length%7);
			for(var i = 1;i<=summs;i++){
				$(".content_con").append("<li class='prev_dayss title_right_click'>"+i+"</li>")
			}//显示下个月份前几天
		}
	</script>

	<script>
		// function getDays(month){
		// 	var dates=new Date();
		// 	var Y=dates.getFullYear(),
		// 		M=dates.getMonth(),
		// 		thisMonth,
		// 		nexMonth;
		// 	thisMonth=new Date(Y+'/'+(M+1)+'/01 00:00:00');
		// 	if((M+1)<12){
		// 		nexMonth=new Date(Y+'/'+(M+2)+'/01 00:00:00')
		// 	}else{
		// 		nexMonth=new Date((Y+1)+'/'+'/01/01 00:00:00')
		// 	}
		// 	console.log(nexMonth)
		// 	console.log((nexMonth.getTime()-thisMonth.getTime())/1000/60/60/24);
		// }
	</script>
</body>
</html>